<template>
    <div class="px-[40px] pt-[10px]">
        <CustomTitle title="设备概况"></CustomTitle>
        <div class="w-full h-[360px] bg-[#1B1B1B] text-[#E6E6E6] mt-[10px] rounded-[10px] flex items-center">
            <div v-if="datas" class="w-[1000px] h-full pl-[36px] py-[30px] flex flex-wrap gap-x-[60px] gap-y-[14px]">
                <div @click="clickItem(item.key)" class="w-[124px] cursor-pointer" v-for="(item, index) of datas.type"
                    :key="index">
                    <div
                        class="w-[124px] h-[118px] bg-[#242424] rounded-[8px] flex flex-col items-center justify-evenly">
                        <img v-if="item.key === 'GC'" src="@/assets/images/GC1.png" class="w-[44px] h-[38px]" />
                        <img v-else-if="item.key === 'WATERDETERMINATION'" src="@/assets/images/water.png"
                            class="w-[44px] h-[38px]" />
                        <img v-else-if="item.key === 'PRETREATMENT'" src="@/assets/images/pre_handle.png"
                            class="w-[44px] h-[38px]" />
                        <div class="text-[40px] leading-[40px]">{{ item.value }}</div>
                    </div>
                    <div class="flex justify-center items-center mt-[10px]">
                        <div class="dot mr-[4px]"></div>
                        <div class="text-[18px] ml-[5px] leading-[18px]" v-if="item.key === 'PRETREATMENT'">预处理</div>
                        <div class="text-[18px] ml-[5px] leading-[18px]" v-else-if="item.key === 'WATERDETERMINATION'">
                            露点仪</div>
                        <div class="text-[18px] ml-[5px] leading-[18px]" v-else>{{ item.key }}</div>
                    </div>
                </div>
            </div>
            <div class="flex-grow relative">
                <PieCharts width="700" height="300" ref="chartsRef" />
                <div v-if="datas"
                    class="absolute text-white left-[205px] top-[75px] flex flex-col items-center justify-center border-[4px] border-[#FF9F00] w-[150px] h-[150px] rounded-[100%]">
                    <div class="text-[30px]">{{ datas?.error.normal + datas?.error.warning }}</div>
                    <div class="text-[20px]">总数</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { apiGetDeviceStatistic } from '@/http/api';
import { iDeviceStatistic } from '@/interface/iDeviceStatistic';
import * as echarts from 'echarts';
const chartsRef = ref();
const router = useRouter();
const datas = ref<iDeviceStatistic>();
const getData = async () => {
    try {
        const res = await apiGetDeviceStatistic();

        datas.value = res.data;
    } catch (error) { }
};
onBeforeMount(() => {
    getData();
});
const clickItem = (key: string) => {
    router.push({
        name: 'zfn_devices',
        query: {
            name: key,
        },
    });
};

watch(
    () => datas.value,
    val => {
        if (val) {
            const option: echarts.EChartsOption = chartsRef.value.getOptions();
            const total = val.status.idle + val.status.running + val.status.offline;

            (option.series as any)![0].left = '-20%';
            (option.series as any)![0].tooltip = {
                show: false,
            };
            (option.series as any)![0].radius = ['55%', '75%'];
            (option.series as any)![0].itemStyle = {
                normal: {
                    color: function (colors: any) {
                        var colorList = ['#53DCFF', '#E6E6E6', '#F83253'];
                        return colorList[colors.dataIndex];
                    },
                },
            };
            (option.series as any)![0].label = {
                show: true,
                color: 'white',
            };
            (option.series as any)![0].data = [
                // {
                //   value: val.status.idle,
                //   name: `${((val.status.idle / total) * 100).toFixed(2)}% 空闲  数量：${val.status.idle}`,
                // },
                {
                    value: val.status.running,
                    name: `${((val.status.running / total) * 100).toFixed(2)}% 运行  数量：${val.status.running}`,
                },
                {
                    value: val.status.offline,
                    name: `${((val.status.offline / total) * 100).toFixed(2)}% 离线  数量：${val.status.offline}`,
                },
                {
                    value: val.status.error,
                    name: `${((val.status.error / total) * 100).toFixed(2)}% 故障  数量：${val.status.error}`,
                },
            ];

            chartsRef.value.setOptions(option);
        }
    }
);
</script>
<style lang="less" scoped>
.dot {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #53dcff;
}
</style>
